<template>
  <div class="flex-none ml-[10px]">
    <template v-if="userStore.isLogin">
      <ClientOnly>
        <div class="flex items-center">
          <div
            v-if="userStore.userInfo.isMember && memberPackageTimeView"
            class="flex items-center mr-[10px] text-xs text-[#F2B55B]"
          >
            <span>会员： </span>
            <span>{{ userStore.userInfo.memberPackageName }}</span>
            <span v-if="userStore.userInfo.memberExpire != '-'">
              ({{ userStore.userInfo.memberExpire }})
            </span>
          </div>
          <div
            v-else
            class="w-[38px] h-[38px] mr-[10px]"
            style="overflow: hidden"
          >
            <NuxtLink to="/openvip?mode=recharge">
              <img class="w-[38px] h-[38px]" :src="vipImg" />
            </NuxtLink>
          </div>
          <!-- <Balance /> -->
          <ElDropdown @command="handleCommand">
            <template #default>
              <div class="flex items-center">
                <ElAvatar :size="38" :src="userStore.userInfo.avatar" />
                <!-- <div class="ml-1 flex items-center">
                                    <span class="mr-2">{{
            userStore.userInfo.nickname
        }}</span>
                                    <Icon name="el-icon-ArrowDown"></Icon>
                                </div> -->
              </div>
            </template>

            <template #dropdown>
              <ElDropdownMenu>
                <ElDropdownItem command="user"> 个人信息 </ElDropdownItem>
                <ElDropdownItem command="logout"> 退出登录 </ElDropdownItem>
              </ElDropdownMenu>
            </template>
          </ElDropdown>
        </div>
      </ClientOnly>
    </template>
    <div v-else class="flex items-center">
      <el-image class="w-[25px] h-[25px]" :src="default_avatar"></el-image>
      <ElButton link @click="handleToLogin"> 点击登录 </ElButton>
    </div>
  </div>
  <UserPop ref="userPopRef"> </UserPop>
</template>
<script lang="ts" setup>
import vipImg from "@/assets/images/user/vip.png";
import default_avatar from "@/assets/images/default_avatar.png";
import UserPop from "./user-info.vue";
import Balance from "./balance.vue";
import { useUserStore } from "@/stores/user";
import { useAppStore } from "~/stores/app";
import feedback from "@/utils/feedback";
import { logout } from "@/api/account";
import { LoginPopupTypeEnum } from "@/enums/appEnums";
import {
  ElAvatar,
  ElButton,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
} from "element-plus";
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const userPopRef = shallowRef();

const appStore = useAppStore();
const memberPackageTimeView = computed(() =>
  appStore.config?.member?.memberTimeView?.includes("1")
);

const handleCommand = async (e: any) => {
  switch (e) {
    case "user":
      router.replace({
        path: "/user",
      });
      break;

    case "logout":
      await logout();
      userStore.logout();
      router.replace({
        path: "/",
      });
      break;

    default:
      break;
  }
};

const handleToLogin = () => {
  userStore.setLoginPopupType(LoginPopupTypeEnum.LOGIN);
  router.replace({
    path: "/user",
  });
};
</script>

<style lang="scss" scoped></style>
